<script setup lang="ts">
import { ref } from 'vue'
import { channels } from '../api/index'
import type { channelsArr } from '../types/index'
import { useCurrentStore } from '../store/current'
const store = useCurrentStore()
// const emits = defineEmits<{
//   (e: 'setId', id: number): void
// }>()
// defineProps<{
//   currentId: number
// }>()

const list = ref<channelsArr>([])
const getData = async () => {
  const res = await channels()
  list.value = res.data.channels
  store.setId(res.data.channels[0].id)
  // emits('setId', res.data.channels[0].id)
  console.log(res.data.channels)
}
getData()
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        @click="store.setId(item.id)"
        class="item"
        :class="{ active: store.currentId === item.id }"
        href="javascript:;"
        v-for="item in list"
        :key="item.id"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
